<template>
  <n-grid :col="24" x-gap="10">
    <n-grid-item span="24">
      <n-card>
        <BasicInfo :inventory-item="inventoryItem" />
        <!-- 搜索框 -->
        <div class="py-2">
          <n-input placeholder="请输入序列号/IMEI" clearable />
          <div>
            <BasicTable
              :table-props="tableResult"
              :columns="columns"
              :pagination-props="paginationResult"
              maxHeight="66vh"
              minHeight="48vh"
              @changePage="handleChangePage"
            />
          </div>
        </div>
      </n-card>
    </n-grid-item>
  </n-grid>
  <SnTransaction
    :title="`序列号:${selectedSnObj.name}`"
    v-model:show="modalShowFlag"
    :sn-id="selectedSnObj.id"
    @close="handleHideModal"
    @cancel="handleHideModal"
  />
  <VariantTransactionModal
    v-model:show="variantModalShowFlag"
    :variant-id="variant.id"
    @close="handleHideVariantModal"
    @cancel="handleHideVariantModal"
  />
</template>
<script lang="ts" setup>
import { computed, h, onMounted, ref } from "vue";
import { get, cloneDeep } from "lodash-es";
import { Eye } from "@vicons/ionicons5";
import { NButton, NIcon, NTag } from "naive-ui";
import { getDictLabel } from "@/common/utils/dict/index.ts";
import { InventoryDetailVO } from "@/types/model/inventory/vos/inventory.vo";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { snStatus } from "@/enums/sn/snStatusEnum";
import { getSnsByInventoryId } from "@/api/inventory/inventory.api";
import { currencyFormat } from "@/common/utils/currencyFormatter/index.ts";
import {
  SnTransaction,
  useSnTransaction,
} from "@/components/biz/snTransaction/index";
import {
  VariantTransactionModal,
  useVariantTransactionModal,
} from "@/components/biz/variantTransaction/index";
import BasicInfo from "./basicInfo.vue";

interface IProps {
  inventoryDetail: InventoryDetailVO;
  id: number | string;
}

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    width: "5%",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "序列号/IMEI",
    key: "name",
  },
  {
    title: "最新成本",
    key: "lastCost",
    render: (row: any) => {
      return currencyFormat(row.lastCost);
    },
  },
  {
    title: "状态",
    key: "status",
    render: (row: any) => {
      const targetType = getSnStatus(row.status);
      return h(
        NTag,
        {
          size: "small",
          type: targetType?.color,
        },
        targetType?.name || "/"
      );
    },
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    fixed: "right",
    render: (row: any) => {
      return h(
        NButton,
        {
          size: "small",
          type: "primary",
          secondary: true,
          strong: true,
          class: "mr-2",
          onClick: () => {
            handleGetSnDetail(row);
          },
        },
        {
          icon: () =>
            h(NIcon, null, {
              default: () => h(Eye),
            }),
        }
      );
    },
  },
];

const props = withDefaults(defineProps<IProps>(), {});
const emit = defineEmits(["showVariantTransactionModal"]);

const selectedSnObj = ref<any>({});

const inventoryItem = computed(() => {
  return get(props.inventoryDetail, "inventoryItem") || {};
});

const variant = computed(() => {
  return get(props.inventoryDetail, "variants") || {};
});

const { tableResult, paginationResult, getDataList, handleChangePage } =
  useTableHook<any>({
    api: getSnsByInventoryId,
    queryForm: {
      inventoryId: props.id,
    },
  });

const { modalShowFlag, handleShowModal, handleHideModal } = useSnTransaction();
const {
  modalShowFlag: variantModalShowFlag,
  handleShowModal: handleShowVariantModal,
  handleHideModal: handleHideVariantModal,
} = useVariantTransactionModal();

const getSnStatus = (value: string): Record<string, any> => {
  let result = {};
  if (value) {
    result = snStatus[value];
  }
  return result;
};

// 暴露方法给父组件
defineExpose({
  showVariantTransactionModal: handleShowVariantModal,
});

const handleGetSnDetail = async (snObj: any) => {
  selectedSnObj.value = cloneDeep(snObj);
  handleShowModal();
};

onMounted(() => {
  getDataList();
});
</script>
